<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
              ul,li{
				list-style: none;
				padding: 0;
				cursor: pointer;
			}
			.yi{
				position: absolute;
				left: 50px;
			}
			.yi>li{
				position: relative;
			}
			.yi ul{
				position: absolute;
				left: 200px;
				top: 0;
			}
			.er>li{
				position: relative;
			}
			.er ul{
				position: absolute;
				left: 200px;
				top: 0;
			}
			li{
				/*height: 50px;*/
				width: 200px;
				border: 1px solid grey;
				text-align: center;
				line-height: 50px;
				color: white;
				background-color: black;
			}
			.san,.er{
				display: none;
			}

</style>
<body>
    <ul class="yi">
        <li><span>我是一级</span>
            <ul class="er">
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
            </ul>
        </li>
        <li>我是一级
            <ul class="er">
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
            </ul>
        </li>
        <li>我是一级
            <ul class="er">
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
                <li>我是二级
                    <ul class="san">
                        <li>我是三级</li>
                        <li>我是三级</li>
                        <li>我是三级</li>							
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
<script>

		
		//一级
		$(".yi").children("li").mouseenter(function(){
			$(this).children(".er").stop().show(500)
        .parent().siblings().children("ul").stop().hide(500);
            $(".san").stop().hide(500);
           $(this).css("background-color","#808080");
           
		})
		
		$(".yi").children("li").mouseout(function(){
		    $(this).css("background-color","black")
		})
		
		//二级
		$(".er").children("li").mouseenter(function(){
			$(this).children("ul").stop().show(500)
        .parent().siblings().children("ul").stop().hide(500);
            $(this).css("background-color","#808080");
            $(this).parent().parent().css("background-color","#808080")
		})
		
		$(".er").children("li").mouseout(function(){
		    $(this).css("background-color","black")
		})
		
		
		//三级
		$(".san").children("li").mouseenter(function(){
		    $(this).css("background-color","#808080");
		    $(this).parent().parent().css("background-color","#808080")
		    $(this).parent().parent().parent().parent().css("background-color","#808080")
		})
		
		$(".san").children("li").mouseout(function(){
		    $(this).css("background-color","black")
		})
		
</script>
</html>